.box {
    width: 500px;
    height: 500px;
    background-color: #000;
    color: #fff;
}



.hidden {
   opacity: 0;
}



.mybox-enter  {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.mybox-enter-active {
    transition: all 1s ease-in;
    opacity: 1;
    width: 500px;
    height: 500px;
}

.mybox-enter-done  {
    opacity: 1;
    width: 500px;
    height: 500px;
}

.mybox-exit {
    opacity: 1;
    width: 500px;
    height: 500px;
}

.mybox-exit-active {
    transition: all 1s ease-in;
    opacity: 0;
    width: 0px;
    height: 0px;
}